<template>
  <div>
    <a-menu v-model:selectedKeys="current" mode="horizontal">
      <a-menu-item key="mail">
        <template #icon>
          <mail-outlined />
        </template>
        <router-link to="/axios-demo">axios-demo</router-link>
      </a-menu-item>
      <a-menu-item key="loading">
        <template #icon>
          <appstore-outlined />
        </template>
        <router-link to="/router-demo">router-demo</router-link>
      </a-menu-item>
      <a-menu-item key="app">
        <template #icon>
          <appstore-outlined />
        </template>
        <router-link to="/loading-demo">loading-demo</router-link>
      </a-menu-item>
      <a-sub-menu key="sub1">
        <template #icon>
          <setting-outlined />
        </template>
        <template #title>
          <router-link to="/store-demo">store-demo</router-link>
        </template>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
const current = ref(['mail']);
</script>

<style scoped>

</style>
